<template>
	<view :style="{'--color': color}" v-if="pageShow">
		<status-bar title='论坛'></status-bar>
		<backTop v-if='toTop'></backTop>
		
		<view class="padding10-30" v-if="swiperList.length">
			<u-swiper :list="swiperList" height="150" radius="15" indicator :indicatorActiveColor="color" indicatorInactiveColor="#fff" indicatorMode="dot"></u-swiper>
		</view>
		
		<view class="fixedBox bgwhite" :style="{top: totalHeight + 'px'}">
			<!-- <u-tabs :list="classifyData" keyName="name" :lineColor="color" lineWidth="60" @click="tabClick"
				:activeStyle="{color,fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.05)'}"
				:inactiveStyle="{color:'#333',fontSize:'30rpx',transform:'scale(1)'}"></u-tabs> -->
			<view class="d-flex f-wrap">
				<view class="tab-item flexac" @click="tabClick(item)" v-for="(item,index) in classifyData" :key="index">
					<text class="tab-text size30 color_33" :class="{'active': classifyid == item.classifyid}">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="post-btn flexac" @click="toUrl('/otherPage/forum/selectType')">
			<view class="size28 white bold t-letter6">我要发布</view>
		</view>
		
		<lists :pageData="pageData" :genre="genre"></lists>
		
		<!-- <postBtn></postBtn>	 -->
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import lists from '../components/forum/list.vue'
	import postBtn from '../components/forum/postBtn.vue'
	export default {
		components: {
			lists,
			postBtn
		},
		data() {
			return {
				pageShow: false,
				swiperList: [],
				classifyData: [],
				pageData: [],
				classifyid: '',
				pageindex: 1,
				pagecount: 10,
				getMore: true,
				genre: 1,
				toTop: false
			}
		},
		onShow() {
			this.getCategory()
			this.user_space_manage()
		},
		methods: {
			getCategory() {
				this.$http.get({
					url:'/communityApi/getFilter'
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg)
					if(res.data.isExamine == 1) return this.toUrl(res.data.isExamineRoute)
					this.pageShow = true
					let result = res.data.class || []
					this.classifyData = [
						{ name: '最新发布', classifyid: '' },
						...result
					]
					let imgs = res.data.space_img || []
					this.swiperList = imgs.map(item => (this.$imgUrls(item)))
				})
			},
			user_space_manage(){
				this.$http.get({
					url:'/communityApi/user_space_manage',
					data:{
						pageindex: this.pageindex,
						pagecount: this.pagecount,
						classifyid: this.classifyid
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg)
					let result = res.data.data || []
					this.pageData = this.pageindex == 1 ? result : this.pageData.concat(result)
					if(result.length < this.pagecount) this.getMore = false
					this.genre = res.data.genre
				})
			},
			tabClick(item) {
				this.classifyid = item.classifyid
				this.getMore = true
				this.pageindex = 1
				this.user_space_manage()
			}
		},
		computed: {
			...mapState(['color','vid','share','totalHeight']),
		},
		onReachBottom() {
			if(!this.getMore) return
			this.pageindex ++
			this.user_space_manage()
		},
		onShareAppMessage(res) {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path:`/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: share.imageUrl
			}
		},
		onShareTimeline(){
			let share = this.share
			return {
				title: share.desc,
				query: {share_v_id: this.vid},
				imageUrl: share.imageUrl
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixedBox {
		position: sticky;
		left: 0;
		z-index: 888;
	}
	.tab-item {
		height: 88rpx;
		padding: 0 22rpx;
		.tab-text {
			transform: scale(1);
			&.active {
				color: var(--color);
				font-weight: bold;
				transform: scale(1.05);
				border-bottom: 6rpx solid var(--color);
				padding: 10rpx 0;
			}
		}
	}
	.post-btn {
		width: 200rpx;
		height: 60rpx;
		background: var(--color);
		border-radius: 30rpx;
		margin-left: auto;
		margin-right: 34rpx;
	}
</style>
